<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>仓库管理</title>
    <link rel="stylesheet" href="css/logistics.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="js/vue.js"></script>
    <style>
    body {
        background-color: #e7e8eb;
    }
    
    .all-content {
        width: 100%;
        height: 100%;
    }
    
    .content-title {
        width: 96%;
        height: 60px;
        margin: 0% 2% 0 2%;
        line-height: 60px;
        margin-bottom: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
    }
    
    .content {
        width: 96%;
        height: calc(100% - 50px - 85px);
        margin: 0% 2% 0 2%;
        border: 1px solid #ddd;
    }
    
    .content>div {
        display: inline-block;
    }
    
    .content-title>span {
        font-size: 18px;
        color: #555;
        padding-left: 5px;
    }
    /* 树形样式 */
    
    .tree-wrap {
        width: 250px;
        height: 100%;
        overflow: auto;
        background-color: #f4f6f8;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
    }
    
    .tree-wrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #f5f5f5;
    }
    
    .tree-wrap::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 1 6px rgba(0, 0, 0, .3);
        border-radius: 5px;
        background-color: #f5f5f5;
    }
    
    .tree-wrap::-webkit-scrollbar-thumb {
        /* 滚动条中间滚动的颜色 */
        border-radius: 5px;
        -webkit-box-shadow: inset 0 1 6px rgba(0, 0, 0, .3);
        background-color: #aaa;
    }
    
    .tree-wrap::-webkit-scrollbar-corner {
        /* 滚动条中间滚动的颜色 */
        background-color: #f5f5f5;
    }
    
    .tree-style>div {
        /* 不换行 */
        width: auto;
        min-width: 150px;
        white-space: nowrap;
        height: 35px;
        line-height: 35px;
        padding: 0 0 0 15px;
        font-size: 15px;
        cursor: pointer;
    }
    
    .tree-style>div>span:first-child>i:first-child {
        margin-right: 6px;
        font-size: 19px;
    }
    
    .tree-style>ul {
        margin-left: 20px;
    }
    
    .tree-active {
        color: #fff;
        background-color: #38adff;
    }
    
    .right-wrap {
        width: calc(100% - 255px);
        height: 100%;
        box-sizing: border-box;
        background-color: #fff;
        overflow: auto;
    }
    </style>
</head>
<!-- 树形模板 -->
<template id="item-template">
    <li class="tree-style">
        <div :class="[{'tree-active':this.model.id==this.$root.active}]" @click="toggle" @dblclick="changeType">
            <!-- 是不是文件夹 -->
            <template v-if="isFolder">
                <!-- 是不是已展开 -->
                <span v-if="!open">
                 <i class="fa fa-caret-right"></i><i class="fa fa-folder-o"></i>
                </span>
                <span v-else>
                  <i class="fa fa-caret-down"></i><i class="fa fa-folder-open-o"></i>
             </span>
            </template>
            <template v-else>
                <i class="fa fa-file-text-o"></i>
            </template>
            <!-- 显示的节点名称 -->
            <span v-text="model.text"></span>
        </div>
        <ul v-show="open" v-if="isFolder">
            <item v-for="model in model.children" :model="model">
            </item>
            <!-- <li class="add" @click="addChild">+</li> -->
        </ul>
    </li>
</template>

<body>
    <div class="all-content" id="qiein-app">
        <!-- 头部样式 -->
        <header class="qiein-head">
            <div class="qiein-logo">
                <img src="img/qiein-logo.png" alt="">
            </div>
            <!-- 头部导航 -->
            <div class="head-nav">
                物流信息<i class="fa fa-angle-down"></i>
                <div class="head-nav-ul-wrap">
                    <ul>
                        <li>物流信息</li>
                        <li>物流财务</li>
                        <li>物流大数据</li>
                        <li>物流信息</li>
                    </ul>
                </div>
            </div>
            <!-- 头部搜索 -->
            <div class="head-search">
                <div>
                    <i class="fa fa-search"></i>
                    <input type="text">
                </div>
            </div>
            <!-- 头部提示 -->
            <div class="head-prompt">
                <i class="fa fa-bell"></i>
                <span>1</span>
            </div>
            <div class="login-user">
                <span><i class="fa fa-user"></i></span>
                <div>超级管理员</div>
            </div>
        </header>
        <div class="content-title">
            <span>库房列表</span>
        </div>
        <div class="content">
            <!-- 树形 -->
            <div class="tree-wrap">
                <ul id="demo">
                    <item class="" :model="treeData">
                    </item>
                </ul>
            </div>
            <!-- 右边主要内容 -->
            <div class="right-wrap">
            </div>
        </div>
    </div>
    <!-- 内容结束 -->
</body>
<script>
// demo data
var data = {
    id: '1', //对应ID
    name: '', //对应name
    text: '杭州金夫人总库房', //展示
    value: '32',
    children: [{
        id: '2',
        name: '',
        text: '库房1',
        value: '32',
        children: [{
            id: '3',
            name: '',
            text: '货架1',
            value: '32'
        }, {
            id: '4',
            name: '',
            text: '货架2',
            value: '32'
        }]
    }, {
        id: '5',
        name: '',
        text: '库房2',
        value: '32',
        children: [{
            id: '6',
            name: '',
            text: '货架1',
            value: '32'
        }, {
            id: '7',
            name: '',
            text: '货架2',
            value: '32'
        }]
    }]
}


// define the item component
Vue.component('item', {
    template: '#item-template',
    props: {
        active: 1,
        model: Object
    },
    data: function() {
        return {
            open: false
        }
    },
    computed: {
        isFolder: function() {
            return this.model.children &&
                this.model.children.length
        }
    },
    methods: {
        //展开事件
        toggle: function() {
            if (this.isFolder) {
                this.open = !this.open
            }
            this.$root.active = this.model.id;
            console.log(this.$root.active);
        },
        //改变当前元素类型
        changeType: function() {
            if (!this.isFolder) {
                Vue.set(this.model, 'children', [])
                this.addChild()
                this.open = true
            }
        },
        //添加子元素
        addChild: function() {
            this.model.children.push({
                id: Math.random(1),
                text: '新仓库'
            })
        }
    }
})
var data1 = [{
    id: 1,
    name: 1,
    pid: 0
}, {
    id: 2,
    name: 1,
    pid: 1
}, {
    id: 3,
    name: 1,
    pid: 1
}, {
    id: 4,
    name: 1,
    pid: 2
}, {
    id: 5,
    name: 1,
    pid: 2
}];
// boot up the demo
var demo = new Vue({
    el: '#qiein-app',
    data: {
        treeData: data,
        active: 1
    },
    created: function() {
        //页面载入时，请求数据
        this.getData();
        console.log(getParent(data1));
    },
    methods: {
        //获取数据
        getData: function() {
            // $.post('./getData',function(response){
            //      this.treeData=response.data;
            //  });
        }
    }
})

function getParent(data) {
    let temp;
    for (let i = 0; i < data.length; i++) {
        if (data[i].pid == 0) {
            temp = data[i];
            data.splice(i, 1);
            break;
        }
    }
    return getChild(temp, data);
}

function getChild(parent, child) {
    parent.child = [];
    let childtemp = [];
    for (let i = 0; i < child.length; i++) {
        if (child[i].pid == parent.id) {
            //如果是父元素的儿子
            parent.child.push(child[i]);
        } else {
            childtemp.push(child[i]);
        }
    }
    if (parent.child) {
        for (let i = 0; i < parent.child.length; i++) {
            getChild(parent.child[i], childtemp);
        }
    }
    return parent;
}
</script>

</html>
